<!DOCTYPE html>
<html lang="en">
<head>
<title>How can I make tables more accessible?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How can I make tables more accessible?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_B499435F-746E-4A5E-8733-28C58B3737C9" class="text-block-content">
    <p>Users of screen readers cannot interpret tables the same way sighted users do. Sighted users can tell at a glance what column and row a given cell is associated with, but a screen reader user needs a properly coded table. To make tables usable, additional steps will need to be taken to make them accessible.</p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="examples-of-tables-simple-table">
    <h2 class="step-title screensteps-heading">Examples of Tables: Simple Table</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/517/original/bf61080c-3510-4986-a15b-a21daffee5cd.png" alt="" height="155" width="308">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_009A7AF0-B833-4CE7-B1B9-FCA789D1DB2A" class="text-block-content">
    <p>The image above displays a simple table: books read by two people. Only column headers are needed to identify who read which books.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="examples-of-tables-complex-table">
    <h2 class="step-title screensteps-heading">Examples of Tables: Complex Table</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/518/original/9b6bac1d-e662-461e-9410-06be2890d9ba.png" alt="" height="155" width="380">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_32EDBDFD-4745-4405-9F25-E2FAC619B5B4" class="text-block-content">
    <p>In the image above, there is a complex table: books read by two people each week. Both column and row headers are needed.</p>
<p>In the second example, a screen reader user will know that <em>The Sound and the Fury</em> was the book read by Tomiko on Week 3.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="steps-to-making-accessible-tables">
    <h2 class="step-title screensteps-heading">Steps to Making Accessible Tables</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/131/574/original/36b970bb-14ad-4a47-9eae-f324f51d69b2.png" alt="" height="421" width="370">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_B0192606-8EFD-44B1-9FE6-CF3491D74C69" class="text-block-content">
    <p>When adding tables, add a row and/or column to be used as a heading for each as appropriate. The table creation menu contains a <strong>Headers</strong> option that allows for designating the first row, column, or both as headers.</p>
<p>Add a <strong>Caption</strong>, if necessary, to the table to inform readers of the table's content. Good examples are "Data from recent study," "Table of inputs and outputs," etc.</p>
<p>Tables should only be used for tabular data, not for layout.</p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
